<template>
    <view class="search-bar" :style="{ backgroundColor, color }">
        <view class="search" :style="{ borderRadius }">
            <view class="search-text">
                <u-icon name="search"></u-icon>
                <swiper autoplay :interval="data.interval" circular vertical disable-touch class="swiper">
                    <template v-for="(item, index) in list">
                        <swiper-item class="swiper-item" @click="click(item)">{{ item }}</swiper-item>
                    </template>
                </swiper>
            </view>
        </view>
        <view class="scan-btn" v-if="scan" @click="openCamera"><text class="icon">&#xe647;</text></view>
        <view class="o-position-relative chat-btn" @click="jump2chat">
            <text class="icon">&#xe64d;</text>
            <text class="badge" v-if="sumUnreadCount > 0">{{ sumUnreadCount > 99 ? '99+' : sumUnreadCount }}</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { useNoticeStore, useChatStore } from '@/store'
import global from '@/config'

interface dataProps {
    backgroundColor: string
    color: string
    borderRadius: string
    scan: boolean
    list: Array<any>
}
withDefaults(defineProps<dataProps>(), {
    backgroundColor: '',
    color: '',
    borderRadius: '',
    scan: false,
    list: () => []
})
const noticeStore = useNoticeStore()
const chatStore = useChatStore()

const data = reactive({
    interval: 5000
})

const unreadCount = computed(() => {
    return chatStore.unreadCount.chat + chatStore.unreadCount.groupChat
})

const notice = noticeStore.notice

const sumUnreadCount = computed<number>(() => {
    return unreadCount.value + notice.trans.unread + notice.afterSales.unread + notice.settlementBill.unread + notice.system.unread
})

/** 扫码 */
function openCamera() {
    // #ifdef APP-PLUS
    uni.scanCode({
        onlyFromCamera: true,
        scanType: ['qrCode', 'barCode'],
        success: res => {
            // 溯源码
            if (res && res.result) {
                let code = res.result
                if (code.indexOf('sourcecode') > 0) {
                    code = code.substring(code.lastIndexOf('/') + 1)
                }
                if (code.length === 32) {
                    uni.$u.$MRouter.scanWebview.to({
                        url: `${global.H5_URL}/pages/merchant/tracesource/index`,
                        params: JSON.stringify({
                            uniqueCode: code
                        })
                    })
                } else {
                    uni.$u.$tools.showError('无效溯源码！')
                }
            }
        },
        fail: _ => {
            uni.$u.$tools.showError('扫码失败，请确保二维码或条形码有效！')
        }
    })
    // #endif
}
/** 消息中心 */
function jump2chat() {
    uni.$u.$MRouter.messageCenter.to()
}
/** 搜索 */
function click(e: string) {
    uni.$u.$MRouter.search.to({ keyword: e })
}
</script>

<style lang="scss" scoped>
.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(var(--status-bar-height) + 66px);
    z-index: 999;
    overflow: hidden;
    position: fixed;
    width: 100vw;
    top: 0;
    left: 0;
    padding-left: 20rpx;
    padding-top: var(--status-bar-height);
    .icon {
        font-size: 42rpx;
    }
    .holder {
        width: 30rpx;
    }
    .search {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #f4f4f4;
        color: #999;
        height: 80rpx;
        &-text {
            font-size: 32rpx;
            color: #999999;
            flex: 1;
            padding: 10rpx 0;
            display: flex;
            margin-left: 20rpx;
        }
        :deep(.u-swiper) {
            height: 30px;
        }
    }
    .scan-btn {
        padding: 20rpx 15rpx 20rpx 30rpx;
    }
    .chat-btn {
        padding: 20rpx 30rpx 20rpx 15rpx;
    }
}
.swiper {
    height: 80rpx;
    flex: 1;
    .swiper-item {
        line-height: 80rpx;
        padding-left: 20rpx;
        font-size: 26rpx;
    }
}
.badge {
    color: white;
    background-color: #fc4f75;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 4px;
    width: 34rpx;
    height: 34rpx;
    line-height: 34rpx;
    font-size: 20rpx;
}
</style>
